<template>
    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.previewState.visible"
            :title="api.previewState.title"
            destroy-on-close
            width="90%"
            @close="api.onClosePreview()"
    >
        <el-tabs
                v-if="api.previewState.data"
                v-model="state.active"
                class="demo-tabs">
            <el-tab-pane
                    v-for="(value,key) in api.previewState.data"
                    :label="renderLabel(key)?.name"
                    :name="key"
            >
                <highlightjs :code="value"/>
            </el-tab-pane>
        </el-tabs>

    </el-dialog>
</template>

<script lang="ts" setup>
import {GenTableApi} from "~/api/system/gen/gen.api";
import {reactive} from "vue";

interface Props {
    api: GenTableApi;
}

const {api} = withDefaults(defineProps<Props>(), {});

const state = reactive({
    active: "vm/java/entity.java.vm",
    tabNames: [
        {name: "entity", value: "vm/java/entity.java.vm", class: "language-java"},
        {name: "vo", value: "vm/java/vo.java.vm", class: "language-java"},
        {name: "dto", value: "vm/java/dto.java.vm", class: "language-java"},
        {name: "controller", value: "vm/java/controller.java.vm", class: "language-java"},
        {name: "service", value: "vm/java/service.java.vm", class: "language-java"},
        {name: "serviceImpl", value: "vm/java/serviceImpl.java.vm", class: "language-java"},
        {name: "mapper", value: "vm/java/mapper.java.vm", class: "language-java"},

        {name: "Create", value: "vm/vue/Create.vue.vm", class: "language-java"},
        {name: "Edit", value: "vm/vue/Edit.vue.vm", class: "language-java"},
        {name: "List", value: "vm/vue/List.vue.vm", class: "language-java"},
        {name: "Detail", value: "vm/vue/Detail.vue.vm", class: "language-java"},
        {name: "api", value: "vm/vue/api/api.ts.vm", class: "language-java"},
        {name: "types", value: "vm/vue/api/types.ts.vm", class: "language-java"},
    ],
});

function renderLabel(key: string) {
    return state.tabNames.find(item => item.value === key);
}
</script>

<style lang="scss" scoped>

</style>
